<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市级联</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<!--省市级联-->
<select id="province">
    <option>------请选择所在省份------</option>
</select>
<select id="city">
    <option>------请选择所在市区------</option>
</select>
</body>
<script>
    $(function () {
        let provis = ["北京市","河北省","河南省", "山东省", "山西省", "辽宁省"];
        let city = [["昌平区", "海淀区",  "朝阳区", "房山区", "东城区", "西城区"],
            ["邯郸市", "唐山市", "石家庄市", "秦皇岛", "承德市"],
            ["郑州市", "驻马店市", "洛阳市", "开封市", "商丘市", "安阳市", "周口市"],
            ["菏泽市", "济南市", "德州市", "青岛市", "烟台市", "威海市"],
            ["太原市", "运城市", "大同市", "阳泉市", "长治市", "临汾市"],
            ["葫芦岛", "锦州市", "鞍山市", "大连市", "沈阳市"]
        ];
        //循环创建 option，添加到第一个下拉框
        for(let i = 0 ; i < provis.length; i ++){
            $("#province").append($("<option value='"+i+"'>"+provis[i]+"</option>"));
        }

        //给第一个下拉框添加change事件
        $("#province").change(function () {
            //先清空，再添加一个提示的option
            $("#city").empty();
            $("#city").append($("<option>------请选择所在市区------</option>"));
            let index = $("#province").val();
            let citys = city[index];
            //循环创建 option，添加到第而个下拉框
            for(let i = 0 ; i < citys.length; i ++){
                $("#city").append($("<option value='"+i+"'>"+citys[i]+"</option>"));
            }

        });


    });
</script>
</html>